.SS-items {
position : relative;
margin-top: 20px;
/*max-width: 1024px;

border : 1px solid #d6dfe6;
 used when position was absolute 
absolue position is not nice with responsive resizing
width : 400px;
height : 200px;
top : 20px;
left : 20px;*/
}


.highlight {fill:#09C;
border:1px solid green;}

.SS-item {
position : relative; /* position : absolute; */
top:0;
left:0;
display :none;
border:1px solid #E8EEF3;
border-radius:5px;
padding:5px;
text-align:center;
}
.SS-item img{
	 max-width: 100%;
	 margin:10px 5px;
}
.SS-items .SS-item figcaption {
background:#efefef;
padding:3px;
}
.SS-item:first-child {
display : block;
}

.my-svg-container{
 display: inline-block;
 position: relative;
 width: 100%;
 padding-bottom: 55%; /* depends on svg ratio, for my zebra height/width = 1.2 so padding-bottom = 50% * 1.2 = 60% */
 height:auto;
 vertical-align: middle; /* top | middle | bottom ... do what you want */
}

.my-svg{ /* svg into : object, img or inline */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height:auto;
  width: 100%; /* only required for <img /> */
}



.SS-description{
padding: 0 15px;
width:100%;
text-align:left;
}
.controls {
margin : 10px 0;
}
.slidestatus{
display: inline-block;
padding-left: 10px;
font-size: 13px;
}

/*
#controls li {
    display : inline-block;
    padding : 5px;
    border : 1px solid #ccc;
    background-color : #eee;
    cursor : pointer;
} 
*/

figcaption{margin:15px 5px;}

